<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: skyblue;
    }

    .cranes {
      font-size: 7px;
      width: 52em;
      height: 50em;
      position: relative;
    }

    .cranes div {
      color: white;
      border-left: calc(var(--left) * 1em) solid transparent;
      border-right: calc(var(--right) * 1em) solid transparent;
      border-bottom: calc(var(--bottom) * 1em) solid;
      position: absolute;
      transform: rotate(calc(var(--rotation) * 1deg));
      left: calc(var(--x) * 1em);
      top: calc(var(--y) * 1em);
      filter: opacity(0.6);
    }

    .cranes .head {
      --left: 13;
      --right: 6;
      --bottom: 2;
      --x: 0;
      --y: 21;
      --rotation: -5;
    }

    .cranes .neck {
      --left: 6;
      --right: 6;
      --bottom: 12;
      --x: 13.8;
      --y: 19;
      --rotation: 75;
    }

    .cranes .side {
      --left: 1.5;
      --right: 11.5;
      --bottom: 20;
      --x: 18.8;
      --y: 15.1;
      --rotation: 20;
    }

    .cranes .wing {
      --left: 18.7;
      --right: 30;
      --bottom: 8;
      --x: 6.7;
      --y: 9.2;
      --rotation: -41.9;
    }

    .cranes .tail {
      --left: 18.6;
      --right: 7.7;
      --bottom: 3.9;
      --x: 19.6;
      --y: 38.1;
      --rotation: -126.5;
    }

    .cranes .belly {
      --left: 6.2;
      --right: 1.8;
      --bottom: 11.5;
      --x: 17.5;
      --y: 27.8;
      --rotation: -99;
    }

  </style>
</head>
<body>
  <figure class="cranes">
    <div class="head"></div>
    <div class="neck"></div>
    <div class="side"></div>
    <div class="wing"></div>
    <div class="tail"></div>
    <div class="belly"></div>
  </figure>
</body>
</html>